<?php 
	require_once 'util/public.php';
	session_start();
	$islogin = FALSE;
	if(isset($_SESSION['login_user'])){
		$islogin = TRUE;
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>欢迎来到XXX</title>
<script type="text/javascript" src="js/jquery-1.4.4.js"></script>
<link rel="stylesheet" href="./style/default.css" type="text/css">
<link rel="stylesheet" href="./style/jquery.css" type="text/css">
</head>

<body>
<div id="page_header"> 
</div>
<div id="nav_line">
  <ul id="nav_list">
    <li class="active"> <a href="index.php">网站首页</a> </li>
    <li> <a href="intro.php">公司介绍</a> </li>
    <li> <a href="pic_show.php">图片展示</a> </li>
    <li> <a href="knowledge.php">花卉知识</a> </li>
    <li> <a href="contact.php">业务联系</a> </li>
    <li><a href="feedback.php">客户留言</a></li>
  </ul>
</div>

<div class="body_content"> 
  <!--jQuery slide show-->
  <div class="folio_block">
    <div class="main_view">
      <div class="window">
        <div class="image_reel"> 
        	  <a href="#"><img src="images/pic_show/reel_1.jpg" alt="" /></a> 
            <a href="#"><img src="images/pic_show/reel_2.jpg" alt="" /></a> 
            <a href="#"><img src="images/pic_show/reel_3.jpg" alt="" /></a> 
            <a href="#"><img src="images/pic_show/reel_4.jpg" alt="" /></a> 
        </div>
      </div>
      <div class="paging"> 
      	<a href="#" rel="1">1</a> 
        <a href="#" rel="2">2</a> 
        <a href="#" rel="3">3</a> 
        <a href="#" rel="4">4</a> 
      </div>
    </div>
  </div>
   
  <!--神奇的昏割线-->
  <div>
  <img src="images/div_line.png" class="divider_shadow_hero"/>
  </div>
  
  <div class="short_intro">
  	<div class="block_left">
  		<h2>我们做什么?</h2>
  		<p>在这里写一段文字介绍我们的公司。比如下面：Lua 是一个扩展式程序设计语言，它被设计成支持通用的过程式编程，并有相关数据描述的设施。 Lua 也能对面向对象编程，函数式编程，数据驱动式编程提供很好的支持。它可以作为一个强大、轻量的脚本语言，供任何需要的程序使用。 Lua 以一个用 clean C 写成的库形式提供。</p>
  		<a href="#">了解更多》</a>
  	</div>
  	<div class="block_right">
  		<h2>为什么选择我们?</h2>
  		<p>写一段简短的文字表述我们的优势。比如下面：作为一个扩展式语言，Lua 没有 "main" 程序的概念：它只能 嵌入 一个宿主程序中工作，这个宿主程序被称作 embedding program 或简称为 host 。宿主程序可以通过调用函数执行一小段 Lua 代码，可以读写 Lua 变量，可以注入 C 函数让 Lua 代码调用。这些扩展的 C 函数，可以大大的扩展了 Lua 可以处理事务的领域，这样就可以订制出各种语言，而它们共享一个统一的句法格式的框架。</p>
  		<a href="#">了解更多》</a>
  	</div>
  </div>
  
  <!--神奇的昏割线-->
  	<img src="images/div_line.png" class="divider_shadow_hero"/>
  
  <div class="btn_container">
  	<a href="#">
  		<div class="bot_btn bot_btn_long">
  			<img src="images/bottom_btn1.png" />
  			<div class="bot_btn_text">
  				<h3>Hello World</h3>
  				<p>For a limited time, get Visual Studio and Expression Studio together and save $599.</p>           
  			</div>
  		</div>
  	</a>
  	<a href="#"> 
  		<div class="bot_btn bot_btn_long">
  			<img src="images/bottom_btn2.png">
  			<div class="bot_btn_text">
  				<h3>Hello World 2</h3>
  				<p>Get free Windows Phone Developer Tools.</p>
  			</div>
  		</div>
  	</a>
  	<a href="#">
  		<div class="bot_btn bot_btn_long">
  			<img src="images/bottom_btn3.png">
  			<div class="bot_btn_text">
  				<h3>Hello World 3</h3>
  				<p>Download the beta today, and tell us what you think!</p>
  			</div>
  		</div>
  	</a>
  </div>
</div>
<p>&nbsp;</p>
<p>&nbsp;</p>
 <?php echo_footer($islogin)
  ?>
</body>

<!--jQuery slide show script-->
<script type="text/javascript">
$(document).ready(function() {
	//Code goes here
	//1. Show the paging and activate its first link
	$(".paging").show();
	$(".paging a:first").addClass("active");
	
	//Get size of the image, how many images there are, then determin the size of the image reel.
	var imageWidth = $(".window").width();
	var imageSum = $(".image_reel img").size();
	var imageReelWidth = imageWidth * imageSum;
	
	//Adjust the image reel to its new size
	$(".image_reel").css({'width' : imageReelWidth});
	
	
	//Paging  and Slider Function
	rotate = function(){
	    var triggerID = $active.attr("rel") - 1; //Get number of times to slide
	    var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide
	
	    $(".paging a").removeClass('active'); //Remove all active class
	    $active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
	
	    //Slider Animation
	    $(".image_reel").animate({
	        left: -image_reelPosition
	    }, 500 );
	}; 
	
	//Rotation  and Timing Event
	rotateSwitch = function(){
	    play = setInterval(function(){ //Set timer - this will repeat itself every 7 seconds
	        $active = $('.paging a.active').next(); //Move to the next paging
	        if ( $active.length === 0) { //If paging reaches the end...
	            $active = $('.paging a:first'); //go back to first
	        }
	        rotate(); //Trigger the paging and slider function
	    }, 4000); //Timer speed in milliseconds (7 seconds)
	};
	
	rotateSwitch(); //Run function on launch
	
	//On Hover
	$(".image_reel a").hover(function() {
	    clearInterval(play); //Stop the rotation
	}, function() {
	    rotateSwitch(); //Resume rotation timer
	});	
	
	//On Click
	$(".paging a").click(function() {
	    $active = $(this); //Activate the clicked paging
	    //Reset Timer
	    clearInterval(play); //Stop the rotation
	    rotate(); //Trigger rotation immediately
	    rotateSwitch(); // Resume rotation timer
	    return false; //Prevent browser jump to link anchor
	});
	
		});	
</script>
</html>
